<template>
	<div id="art_list">
		<div class="newsListCenter">
			<div class="newsListDiv">
				<div class="newsListBlue" id="blue">
				<!-- <div class="newsListWhite"></div> -->
					<div class="newsListBox" id="box">
					<div class="sosuo">
						<p>{{title}}</p>
						<div class="findnews">
							<input type="text" v-model="Search" class="inputfind" placeholder="搜索关键词" />
							<div class="findimgbox" @click="getSearchInfor">
								<img class="findimg" src="../../assets/articl/findimg.png" />
							</div>
						</div>
					</div>
					<div class="inline">
						<div class="lin1_l"></div>
						<div class="lin1_r"></div>
					</div>
					<div class="listitemcenter">
						<div class="newsListshow">
							<div class="articleItem" orerid="75" @click="getMoreInfo(75)">
								<div class="articleLeft">
									<span class="articlenum">1.&nbsp;&nbsp;</span>
									<p class="articleOrder">生活中常见的侵权行为</p>
									<span class="articlenew">new</span>
								</div>
								<div class="articletime">2018/11/09 09:37:07</div>
							</div>
						</div>
						<div class="line"></div>
						<!--分页-->
						<p id="totalCounts"></p>
						<div class="contjoin_one_page mypage"></div>
					</div>
					<div class="listitemNone">
						<div class="noneTips">
							<span class="tipsGan"></span>
							<span class="tipsTitle">没有找到符合要求的结果</span>
						</div>
					</div>
				</div>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		data() {
			return {
				types: null,
				url: null,
				title: null,
				//搜索
				Search: ""
			};
		},
		computed: {},
		watch: {},
		mounted() {
			this.types = this.$route.params.type;
			if (this.types == 1) {
				this.url = "wwww.baidu.com";
				this.title = "系统近期消息";
				this.getSetInfor(this.url);
			} else {
				this.url = "wwww.sousou.com";
				this.title = "版权典型案例及问题解答";
				this.getSetInfor(this.url);
			}
		},
		methods: {
			async getSetInfor() {
				console.log("tag", this.url);
			},
			//详情
			getMoreInfo(id) {
				this.$router.push({
					path: `/Articl/${id}`
				});
			},
			//搜索
			getSearchInfor() {
				if (this.Search != "") {
					alert(this.Search);
				}
			}
		}
	};
</script>
<style scoped>
	* {
		margin: 0;
		padding: 0;
	}

	li {
		list-style: none;
	}

	a {
		text-decoration: none;
	}

	.newsListCenter {
		width: 100%;
		height: 712px;
		min-width: 1400px;
		background-color: #fff;
	}

	.newsListCenter .newsListDiv {
		width: 100%;
		height: 100%;
		position: relative;
	}

	.newsListCenter .newsListDiv .newsListBlue {
		width: 100%;
		height: 260px;
		background-color: #6081ff;
	}

	.newsListCenter .newsListDiv .newsListWhite {
		width: 100%;
		height: 452px;
		background-color: #fff;
	}

	.newsListCenter .newsListDiv .newsListBox {
		width: 1200px;
		min-width: 1200px;
		border-radius: 6px;
		padding-bottom: 48px;
		box-shadow: 6px 0px 32px rgba(96, 129, 255, 0.16);
		position: absolute;
		top: 60%;
		left: 50%;
		background-color: #fff;
		transform: translate(-50%, -50%);
		color: #333;
	}

	.newsListCenter .newsListDiv .newsListBox .sosuo {
		width: 1146px;
		height: 48px;
		margin: 0 auto;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.newsListCenter .newsListDiv .newsListBox .sosuo .findnews {
		width: 254px;
		height: 30px;
		border: 1px solid #e3e3e3;
		box-sizing: border-box;
		display: flex;
	}

	.newsListCenter .newsListDiv .newsListBox .sosuo .findnews input {
		border: none;
		height: 100%;
		padding-left: 10px;
		width: 224px;
	}

	.newsListCenter .newsListDiv .newsListBox .sosuo .findnews .findimgbox {
		width: 33px;
		height: 30px;
		display: flex;
		justify-content: center;
		align-items: center;
		background-color: #6080ff;
		cursor: pointer;
		margin-top: -1px;
		margin-right: -1px;
	}

	.newsListCenter .newsListDiv .newsListBox .inline {
		display: flex;
		margin: 0 auto;
		width: 1148px;
	}

	.newsListCenter .newsListDiv .newsListBox .inline .lin1_l {
		width: 108px;
		height: 4px;
		background-color: #6081ff;
	}

	.newsListCenter .newsListDiv .newsListBox .inline .lin1_r {
		width: 1038px;
		height: 4px;
		background-color: #d3deff;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemcenter {
		width: 100%;
		min-width: 1200px;
		height: auto;
		position: relative;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemcenter .newsListshow {
		width: 904px;
		height: 596px;
		margin: 0 auto;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemcenter .newsListshow .articleItem {
		width: 100%;
		height: 50px;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemcenter .newsListshow .articleItem .articleLeft .articlenum {
		float: left;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemcenter .newsListshow .articleItem .articleLeft .articleOrder {
		float: left;
		width: fit-content;
		max-width: 333px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemcenter .newsListshow .articleItem .articleLeft .articlenew {
		float: left;
		margin-top: -20px;
		color: #e94747;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemcenter .newsListshow .articleItem:nth-child(1) {
		margin-top: 30px;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemcenter .pagination {
		position: absolute;
		bottom: 42px;
		left: 50%;
		transform: translate(-50%, 0);
	}

	.newsListCenter .newsListDiv .newsListBox .listitemNone {
		display: none;
		width: 1146px;
		min-width: 1146px;
		height: 596px;
		margin: 0 auto;
		position: relative;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemNone .noneTips {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 194px;
		height: 16px;
		display: flex;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemNone .noneTips .tipsGan {
		width: 16px;
		height: 16px;
		background-image: url("../../assets/articl/tanhao.png");
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.newsListCenter .newsListDiv .newsListBox .listitemNone .noneTips .tipsTitle {
		font-size: 14px;
		color: #999;
		margin-left: 8px;
	}
</style>
